<template>
  <div class="like-page">
    <div class="bj">
      <div class="div1">
        <div class="div2">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        </div>
        <div class="text">好客_160008</div>
        <router-link class="div3" to=""><button @click="fn"><p class="pp">退出</p></button></router-link>
        <p>编辑个人资料></p>
      </div>
    </div>
    <van-grid :column-num="3" class="div4" :border="false">
      <van-grid-item icon="star-o" to="/mylike" text="我的收藏" />
      <van-grid-item icon="wap-home-o" to="/mycz" text="我的出租" />
      <van-grid-item icon="underway-o" text="看房记录" />
      <van-grid-item icon="ecard-pay" text="成为房主" />
      <van-grid-item icon="user-circle-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <div>
      <img
        class="div5"
        src="http://liufusong.top:8080/img/profile/join.png"
        alt=""
      />
    </div>
  </div>
</template>
<script>
import { Dialog } from 'vant'
// import { delToken } from '@/utils/storage'
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    fn () {
      Dialog.confirm({
        title: '提示',
        message: '是否确认退出'
      })
        .then(() => {
          this.$router.push('/myhouse')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
.bj {
  background-image: url("http://liufusong.top:8080/img/avatar.png");
  width: 100%;
  height: 300px;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}
.div1 {
  width: 85%;
  height: 220px;
  background-color: #ffffff;
  position: absolute;
  margin-top: 160px;
  margin-left: 30px;
  box-shadow: 0 0 20px #ccc;
}
img {
  width: 67px;
  height: 67px;
  margin-top: -1px;
}
.div2 {
  position: absolute;
  border: 6px solid #f5f5f5;
  border-radius: 50%;
  width: 67px;
  height: 67px;
  margin-top: -40px;
  margin-left: 38%;
  text-align: center;
}
.text {
  position: absolute;
  margin: 0 auto;
  margin-left: 37%;
  margin-top: 35px;
  text-align: center;
  font-size: 14px;
}
.tc {
  width: 70px;
  height: 25px;
  margin-top: 87px;
  background-color: #21b97a;
  color: white;
  border-radius: 8px;
  border-style: none;
  margin-left: 38%;
}
p {
  color: #9999b3;
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
.pp{
  color: white;
  margin-top: -1px;

}
.div4 {
  margin-top: 84px;
  padding-top: 25px;
}
.div5 {
  width: 90%;
  height: 80px;
  margin: 20px;
}
button{
  width: 80px;
  height: 25px;
  margin-top: 90px;
  background-color:#21b97a;
  color: white;
  border-radius: 10px;
  border-style: none;
  margin-left: 37%;
}

</style>
